<template>
  <div class="nav">
    <van-icon name="home-o" @click="$router.back()" />
    <van-nav-bar title="网易严选" />
    <van-icon name="search" />
  </div>
  <van-tabs @click-tab="onClickTab">
    <van-tab v-for="item in tabNav" :title="item.name" :name="item.id">
      <div class="goodBox">
        <h4>{{ item.name }}</h4>
        <div class="goods" v-for="goods in goodList" :key="goods.id">
          <div class="goods_img"><img :src="goods.listPicUrl" alt="" /></div>
          <div class="goods_name">{{ goods.name }}</div>
          <div class="goods_red"></div>
          <div class="goods_price">
            <p>
              <b>{{ goods.finalPriceInfoVO.priceInfo.finalPrice?.prefix }}￥</b>
              <b>{{ goods.finalPriceInfoVO.priceInfo.finalPrice?.price }}</b>
            </p>
            <span> ￥{{ goods.finalPriceInfoVO.priceInfo.counterPrice }}</span>
          </div>
          <div class="goods_reduce">
            <span>
              {{ goods.finalPriceInfoVO.banner?.title }}
              <span> {{ goods.finalPriceInfoVO.banner?.content }}</span>
            </span>
          </div>
        </div>
      </div>
    </van-tab>
  </van-tabs>
</template>

<script lang="ts" setup>
import { CategoryL2List, ItemList } from '@/types/cateList'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { reqItemList } from '../../api/cate'
const route = useRoute()

// 导航栏数据
const tabNav = ref<CategoryL2List[]>([])

// 商品列表数据
const goodList = ref<ItemList[]>([])

const getItemList = () => {
  const { categoryId, subCategoryId } = route.query
  getCommon(categoryId, subCategoryId)
}

const onClickTab = (title: any) => {
  const { categoryId } = route.query
  getCommon(categoryId, title.name)
}

const getCommon = async (Id: any, subId: any) => {
  const res = await reqItemList(Id, subId)
  // console.log(res)

  tabNav.value = res.data.categoryL2List
  goodList.value = res.data.categoryItems.itemList
}

onMounted(() => {
  getItemList()
})
</script>

<script lang="ts">
export default {
  name: 'VGoodsList'
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
:deep .van-tabs__wrap {
  position: fixed;
  top: 50px;
}
.goodBox {
  padding-top: 50px;
  h4 {
    color: #333;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    font-weight: normal;
  }
  .goods {
    float: left;
    width: 177px;
    height: 268px;
    margin: 0 5px;
    padding: 10px 0;
    .goods_img {
      img {
        width: 100%;
        height: 177px;
        border-radius: 15px;
      }
    }
    .goods_name {
      color: #12161c;
      font-size: 16px;
    }
    .goods_price {
      p {
        float: left;
        b {
          color: #fa1e32;
          font-size: 20px;
          &:first-child {
            font-size: 14px;
            font-weight: normal;
          }
        }
      }
      span {
        color: #999;
        font-size: 14px;
        text-decoration: line-through;
      }
    }
    .goods_reduce {
      span {
        background-color: #fa1e32;
        color: #fff;
        font-size: 14px;
        border-radius: 20px;
        span {
          color: #fa1e32;
          background: #ffe9eb;
          border-radius: 0 20px 20px 0;
        }
      }
    }
  }
}

.nav {
  display: flex;
  justify-content: space-between;
  .van-icon {
    padding: 15px;
  }
  .van-nav-bar {
    width: 200px;
  }
}
</style>
